<template>
  <div id="root">
   <UserHeader :addTodo="addTodo"></UserHeader>
    <List :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></List>
    <UserFooter :todos="todos"></UserFooter>
  </div>
</template>

<script>
import UserHeader from './components/UserHeader.vue'
import UserFooter from './components/UserFooter.vue'
import List from './components/List.vue'

export default {
  name: "App",
  components: { UserHeader, UserFooter, List },
  data(){
        return{
            todos:[
                {id:"1", title:"吃饭", done:"true"},
                // {id:"2", title:"睡觉", done:"false"},
                // {id:"3", title:"敲代码", done:"true"}
            ]
        }
    },
    methods:{
      //添加一个todo
      addTodo(todoObj){
        this.todos.unshift(todoObj)
      },
      //勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id)
          todo.done = !todo.done
				})
			},
      //删除一个todo
      deleteTodo(id){
        this.todos = this.todos.filter((todo)=>{
          return todo.id !== id
        })
      }
    }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

body {
  background-color: #cdcdcd;
}


// header {
//   height: 50px;
//   background: rgba(47, 47, 47, 0.98);
// }

// section {
//   width: 600px;
//   margin: 0 auto;
// }

// header section {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   height: 50px;
// }

// header section p {
//   color: #ddd;
//   font-size: 24px;
//   cursor: pointer;
// }

// header section input {
//   width: 50%;
//   text-indent: 10px;
//   border-radius: 5px;
//   box-shadow: 0 1px 0 rgb(255 255 255 / 24%), 0 1px 6px rgb(0 0 0 / 45%) inset;
//   border: none;
//   outline: none;
//   padding: 5px 10px;
// }

// .title {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
// }

// .title h2 {
//   margin: 20px 0;
// }

// .title span {
//   padding: 0 5px;
//   height: 20px;
//   border-radius: 20px;
//   background: #e6e6fa;
//   line-height: 22px;
//   text-align: center;
//   color: #666;
//   font-size: 14px;
// }

// .list li {
//   height: 32px;
//   display: flex;
//   align-items: center;
//   background-color: #fff;
//   border-left: 5px solid #629a9c;
//   border-radius: 3px;
//   margin-bottom: 10px;
// }

// .list input {
//   width: 22px;
//   height: 22px;
//   margin-left: 20px;
//   margin-right: 15px;
//   cursor: pointer;
// }

// .list p {
//   flex: 1;
// }

// .list a {
//   width: 12px;
//   height: 12px;
//   border-radius: 12px;
//   border: 6px double #fff;
//   margin-right: 10px;
//   background: #ccc;
//   line-height: 14px;
//   text-align: center;
//   color: #fff;
//   font-weight: bold;
//   font-size: 14px;
//   cursor: pointer;
// }

// a:hover {
//   background-color: red;
// }
</style>